import Icon from '@/components/Icon'
import { RootState } from '@/store'
import { useDispatch, useSelector } from 'react-redux'
import styles from './index.module.scss'
import { likeAritcle, collectArticle } from '@/store/actions/article'

type Props = {
  goComment?: () => void
  onShare?: () => void
  onComment?: () => void
  type?: string
}
const CommentFooter = ({ 
  goComment,
  onShare,
  onComment,
  type = 'normal' 
}: Props) => {
  const { detail } = useSelector((state: RootState) => state.article)
  const dispatch = useDispatch()

  // 点赞
  const onLike = async () => {
    await dispatch(likeAritcle(detail.art_id, detail.attitude))
  }

  // 收藏
  const collect = async () => {
    await dispatch(collectArticle(detail.art_id, detail.is_collected))
  }

  return (
    <div className={styles.root}>
      {/* 输入框（是个假的输入框，其实就是个按钮） */}
      <div className="input-btn" onClick={onComment}>
        <Icon type="iconbianji" />
        <span>去评论</span>
      </div>

       {type === 'reply' ? null : (
        <>
          {/* 评论按钮 */}
          <div className="action-item" onClick={goComment}>
            <Icon type="iconbtn_comment"/>
            <p>评论</p>
            <span className="bage">{detail.comm_count}</span>
          </div>

          {/* 点赞按钮 */}
          <div className="action-item"  onClick={onLike}>
            <Icon 
              type={ detail.attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'}
            />
            <p>点赞</p>
          </div>
        </>
       )}

      {/* 收藏按钮 */}
      <div className="action-item" onClick={collect}>
        <Icon 
          type={ detail.is_collected ? 'iconbtn_collect_sel' : 'iconbtn_collect'}
        />
        <p>收藏</p>
      </div>

      {/* 分享按钮 */}
      <div className="action-item" onClick={onShare}>
        <Icon type="iconbtn_share" />
        <p>分享</p>
      </div>
    </div>
  )
}

export default CommentFooter